<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>基础表单</title>
    <link rel="stylesheet" type="text/css" href="../css/mview.css?v=20230607113">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_4109983_698h6iolmzk.css">
    <script type="text/javascript" src="https://duoyue.moreqifu.cn/assets/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../js/cascader.js"></script>
    <script type="text/javascript" src="../js/mview.js?v=2023060713"></script>
    <link rel="stylesheet" href="../css/cascader.css" type="text/css">
</head>

<body>
    <div class="m-card m-mb-1">
        <div class="m-form-item">
            <label><b>*</b>姓名:<font>请输入真实姓名</font></label>
            <input type="text" class="m-input" name="" placeholder="请输入您的姓名">
        </div>
        <div class="m-form-item">
            <label><b>*</b>电话:<font>请输入您的电话号码</font></label>
            <input type="text" class="m-input" name="" placeholder="请输入您的姓名">
        </div>
        <div class="m-form-item">
            <label><b>*</b>行业:</label>
            <select class="m-select">
                <option value="">请选择您的行业</option>
                <option value="1">互联网</option>
                <option value="2">教育</option>
            </select>
        </div>
        <div class="m-form-item">
            <label><b>*</b>下拉选择搜索框:</label>
            <div class="m-picker" id="sort">
                <div class="text" onclick='mviewPicker("sort",true);'>
                    <span>选择分类</span>
                    <i class="iconfont icon-jiantou_liebiaozhankai"></i>
                </div>
                <div class="m-picker-items">
                    <div class="search">
                        <input type="hidden" id="sort_item" value='[{"id":1,"name":"拼多多"},{"id":2,"name":"京东"},{"id":3,"name":"淘宝"}]'>
                        <input type="hidden" id="sort_value" value="2">
                        <input type="text" id="sort_search" placeholder="请输入搜索内容" oninput="mviewPickerSearch('sort',event)" onblur="mviewPickerClose('sort');">
                    </div>
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="m-form-child-title" id="wxkfHeadSettingTitle">
            <label>客服昵称头像设置:</label>
            <div onclick="closeSetting('wxkfHeadSetting');">
                <font>隐藏客服昵称头像配置</font>
                <i class="bx bx-chevrons-up"></i>
            </div>
        </div>
        <div class="m-form-child" id="wxkfHeadSetting">
            <div class="m-form-item">
                <label><b>*</b>客服昵称:</label>
                <div class="m-col-5">
                    <input type="text" class="m-input" id="kefu_nike" placeholder="请输入客服昵称" maxlength="20" value="" onchange="phoneInputEdit(this)">
                </div>
            </div>
            <div class="m-form-item">
                <label>
                    <b>*</b>客服头像:
                </label>
                <div>
                    <a href="javascript:;" class="m-file" style="float:left;margin-left: 0px;">
                        <font>上传</font>
                        <input type="file" name="upload_kefu_head_img" id="upload_kefu_head_img" onchange="jsUpload('kefu_head_img',1024,true,{},'all')">
                    </a>
                    <img src="https://wwcdn.weixin.qq.com/node/wework/images/avatar2.96df991a19.png" class="m-file-image" id="kefu_head_img_show" style="max-width: 300px;">
                    <input type="hidden" name="kefu_head_img" id="kefu_head_img" value="https://wwcdn.weixin.qq.com/node/wework/images/avatar2.96df991a19.png">
                </div>
            </div>
        </div>
        
        <div class="m-form-item">
            <div class="m-form-btn m-mr-1">立即注册</div>
            <div class="m-form-btn m-btn-dark"><i class="iconfont icon-bangzhu1"></i>了解更多</div>
        </div>
        <div class="m-info-message">
            <label>提示样式一:</label>
            <ul>
                <li>如果链接出现打不开或者提示拦截,请在后台重新制作即可(一般不会出现!)如果链接出现打不开或者提示拦截,请在后台重新制作即可(一般不会出现!)如果链接出现打不开或者提示拦截,请在后台重新制作即可(一般不会出现!)</li>
                <li>功能2</li>
                <li>功能3</li>
            </ul>
        </div>
        <div class="m-info-item">
            <label>解释说明:</label>
            <div class="text">
                请认真填写上方表单内容 <i class="iconfont icon-bangzhu1"></i><p>了解更多<font>什么内容</font></p>
            </div>
        </div>
        <div class="m-info-item">
            <label>客服备注:</label>
            <div class="links ms-2">
                <font id="remark_4t3ce2qd">转化宝24小时客服</font><a href="javascript:;" onclick="updateWxkfLinkRemark('4t3ce2qd','转化宝24小时客服');"><i class="iconfont icon-plus_y"></i>修改</a></div>
        </div>
        <div class="m-info-item">
            <label style="height:40px;line-height:40px;">企业微信客服:</label>
            <div class="image">
                <img id="kefu_head_img_4t3ce2qd" src="https://wework.qpic.cn/wwpic3az/690027_0yI_u28sSJC2Jfh_1719822725/0" style="width: 32px;height: 32px;">
                <p id="kefu_nike_4t3ce2qd">转化宝24小时客服</p>
                <a href="javascript:;" onclick="kefuUpdateModal();"><i class="iconfont icon-plus_y"></i>更新客服</a>
                <a href="javascript:;" class="text-danger ms-2" onclick="mviewNotification('warning','链接删除提醒','客服链接删除后将无法访问，且无法恢复；请确认是否删除？','确认删除','取消',{'type':'link_delete','kfid':'4t3ce2qd','page':'details'});"><i class="iconfont icon-plus_y"></i>删除客服</a>
            </div>
        </div>
    </div>
    <div class="m-card m-mb-1">
        <div class="m-search">
            <div class="m-search-items">
                <div class="m-search-item">
                    <label>姓名</label>
                    <input type="text" name="" placeholder="请输入您的姓名">
                </div>
                <div class="m-search-item">
                    <label>电话号码</label>
                    <input type="text" name="" placeholder="请输入电话号码">
                </div>
                <div class="m-search-item">
                    <label>订单状态</label>
                    <select name="">
                        <option value="">全部订单</option>
                        <option value="">支付成功</option>
                        <option value="">支付失败</option>
                    </select>
                </div>
                <div class="m-search-item">
                    <div id="cascader"></div>
                </div>
                <div class="m-search-item">
                    <div class="button">搜索</div>
                </div>
            </div>
        </div>
        <div class="m-search">
            <div class="m-search-items">
                <div class="m-search-item">
                    <label>姓名</label>
                    <input type="text" name="" placeholder="请输入您的姓名">
                </div>
                <div class="m-search-time">
                    <ul>
                        <li>近7天</li>
                        <li class="active">近14天</li>
                        <li>近30天</li>
                        <input type="text" name="" placeholder="请输入电话号码">
                    </ul>
                </div>
                <div class="m-search-item">
                    <div class="button">搜索</div>
                </div>
            </div>
            <div class="m-search-handle">
                <div class="button">
                    <i class="iconfont icon-plus_y"></i>
                    <font>添加订单</font>
                </div>
                <div class="button m-btn-dark">
                    <i class="iconfont icon-bangzhu1"></i>
                    <font>查看说明</font>
                </div>
            </div>
        </div>
    </div>
    <div class="m-card m-mb-1">
        <div class="m-card-header header-left">更多表单组件表单</div>
        <div class="m-form-item">
            <label><b>*</b>设备名称:<font>请在设备右上角查看</font></label>
            <input type="text" class="m-input" name="" placeholder="请输入设备名称">
        </div>
        <div class="m-form-item">
            <label><b>*</b>设备状态:<font>请输入您的电话号码</font></label>
            <div class="badge-lists">
                <ul>
                    <li><i class="iconfont icon-weixinzhifu"></i>微信支付</li>
                    <li class="active"><i class="iconfont icon-zhifubaozhifu"></i>支付宝支付</li>
                    <li>京东支付</li>
                    <li>银联支付</li>
                </ul>
            </div>
        </div>
        <div class="m-form-item">
            <label><b>*</b>设备状态:<font>请输入您的电话号码</font></label>
            <div class="badge-handle">
                <ul>
                    <li class="active"><i class="iconfont icon-zengjia1"></i>添加设备</li>
                    <li>微信支付<i class="iconfont icon-guanbi"></i></li>
                    <li>支付宝支付<i class="iconfont icon-guanbi"></i></li>
                    <li>京东支付<i class="iconfont icon-guanbi"></i></li>
                    <li>银联支付<i class="iconfont icon-guanbi"></i></li>
                </ul>
            </div>
        </div>
        <div class="m-form-item">
            <label><b>*</b>开启选中按钮:</label>
            <div class="m-check-items">
                <ul>
                    <li>
                        <div>没有开启</div>
                        <img src="https://doyea.moreqifu.cn/uploads/20240725/11004335217.png">
                    </li>
                    <li class="active">
                        <div>立即开启</div>
                        <img src="https://doyea.moreqifu.cn/uploads/20240725/11004335217.png">
                    </li>
                </ul>
            </div>
        </div>
        <div class="m-form-item">
            <label><b>*</b>单选按钮:</label>
            <div class="m-checks">
                <input class="m-check" type="checkbox" id="formCheck2" checked="">
                <label for="formCheck2">
                    开启加粉
                </label>
            </div>
        </div>
        <div class="m-form-item">
            <label><b>*</b>设备名称:<font>请在设备右上角查看</font></label>
            <textarea class="m-textarea" placeholder="请输入检测查询"></textarea>
        </div>
        <div class="m-form-item">
            <div class="m-form-btn m-mr-1"><i class="iconfont icon-shezhi"></i>修改配置</div>
            <div class="m-form-btn m-btn-danger"><i class="iconfont icon-shanchu"></i>删除产品</div>
        </div>
    </div>
    <div class="m-card m-mb-1">
        <div class="m-card-header header-left">新建标签组</div>
        <div class="m-form-item">
            <label><b>*</b>标签组名称:<font>请在设备右上角查看</font></label>
            <input type="text" class="m-input" name="" placeholder="请输入标签组名称">
        </div>
        <div class="m-form-item">
            <label><b>*</b>标签:</label>
            <ul class="m-input-child">
                <li>
                    <input type="text" value="" placeholder="请输入标签名称">
                    <i class="iconfont icon-shanchu"></i>
                </li>
                <li>
                    <input type="text" value="" placeholder="请输入标签名称">
                    <i class="iconfont icon-shanchu"></i>
                </li>
                <li>
                    <input type="text" value="" placeholder="请输入标签名称">
                    <i class="iconfont icon-shanchu"></i>
                </li>
            </ul>
            <div class="m-input-child-add">
                <i class="iconfont icon-plus_y"></i>
                添加标签
            </div>
        </div>
        <div class="m-form-item">
            <div class="m-form-btn m-mr-1"><i class="iconfont icon-shezhi"></i>修改配置</div>
            <div class="m-form-btn m-btn-danger"><i class="iconfont icon-shanchu"></i>删除产品</div>
        </div>
    </div>
    <div class="m-card m-mb-1">
        <div class="m-card-header header-bottom">按钮样式列表</div>
        <div class="m-btn-group m-gap-2 m-mb-1">
            <div class="m-btn m-btn-primary">primary</div>
            <div class="m-btn m-btn-success"><i class="iconfont icon-ok_y"></i>成功按钮</div>
            <div class="m-btn m-btn-info">info</div>
            <div class="m-btn m-btn-warning">warning</div>
            <div class="m-btn m-btn-dark">dark</div>
            <div class="m-btn m-btn-secondary">secondary</div>
            <div class="m-btn m-btn-light">light</div>
        </div>
        <div class="m-btn-group m-gap-2">
            <div class="m-btn m-btn-rounded m-btn-primary">primary</div>
            <div class="m-btn m-btn-rounded m-btn-success">success</div>
            <div class="m-btn m-btn-rounded m-btn-info">info</div>
            <div class="m-btn m-btn-rounded m-btn-warning">warning</div>
            <div class="m-btn m-btn-rounded m-btn-dark">dark</div>
            <div class="m-btn m-btn-rounded m-btn-secondary">secondary</div>
            <div class="m-btn m-btn-rounded m-btn-light">light</div>
        </div>
    </div>
    <script type="text/javascript">
        // languages.js
var languages = [
    {
      "indexcode": "1",
      "name": "Front-End",
      "s": [
        {
        "indexcode": "11",
        "name": "HTML",
          
        },
        {
        "indexcode": "12",
        "name": "CSS",
          
        },
        {
        "indexcode": "13",
        "name": "JavaScript",
          "s": [
            {
                "indexcode": "131",
                "name": "jQuery"
            },
            {
                "indexcode": "122",
                "name": "Angular"
            },
            {
                "indexcode": "123",
                "name": "React"
            },
          ]
        },
      ]
    },

    {
      "indexcode": "2",
      "name": "Back-End",
      "s": [
        {
        "indexcode": "21",
        "name": "C",
          "s": [
            {
                "indexcode": "211",
                "name": "C"
            },
            {
                "indexcode": "212",
                "name": "C++"
            },
            {
                "indexcode": "213",
                "name": "C#"
            },
          ]
        },
        {
        "indexcode": "22",
        "name": "Database",
          "s": [
            {
                "indexcode": "221",
                "name": "MySql"
            },
            {
                "indexcode": "222",
                "name": "SQL"
            },
            {
                "indexcode": "223",
                "name": "Oracle"
            },
          ]
        },
        {
        "indexcode": "23",
        "name": "Others",
          "s": [
            {
                "indexcode": "231",
                "name": "Node.js"
            },
            {
                "indexcode": "122",
                "name": "Python"
            },
            {
                "indexcode": "123",
                "name": "Ruby"
            },
          ]
        },
        // feel free to add your own data to the dropdown
        {
        "indexcode": "24",
        "name": "jQueryScript",
          "s": [
            {
                "indexcode": "241",
                "name": "jQueryScript"
            },
            {
                "indexcode": "242",
                "name": "CSSScript"
            },
            {
                "indexcode": "243",
                "name": "VueScript"
            },
          ]
        },
      ]
    }
];
$(function(){
          // parse the data
          languages.forEach(function(item){
            item.label = item.name
            item.value = item.indexcode
            item.children = item.s
            item.s.forEach(function(item2){
              item2.label = item2.name
              item2.value = item2.indexcode
              if (item2.s && item2.s.length) {
                item2.children = item2.s
                item2.s.forEach(function(item3){
                  item3.label = item3.name
                  item3.value = item3.indexcode
                })
              }
            })
          })
          // initialize the plugin on the input field and done
          $('#cascader').zdCascader({
            data: languages,
            container: '#cascader',
            onChange: function(value, label, datas){
              console.log(value, label, datas);
            }
          });
        })

    </script>
</body>

</html>